<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<image class="myUser_bg" src="/static/images/orderTopBj.png">
		</image>

		<myHeard :search="search" :isScrollTop="'#f4f5fa'" :title="title" :isTrue="isTrue" :mystate="1"
			@goPath="goBack"></myHeard>

		<view class="myPages__stateMain" v-if="particulars">
			<!-- 订单状态 -->
			<!-- 订单状态-----已完成 -->
			<view class="myPages__stateBox" v-if="particulars.orderStatus==30">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle">订单已完成</span>
				</view>
				<view class="myPages__stateBoxBottom">订单交易完成</view>
			</view>
			<!-- 订单状态-----交易关闭【已支付未发货全部申请退款】-->
			<view class="myPages__stateBox"
				v-else-if="(particulars.orderStatus==10&&particulars.payStatus==20)||(particulars.orderStatus==10&&particulars.payStatus==10)">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle">交易关闭</span>
				</view>
				<view class="myPages__stateBoxBottom" v-if="particulars.orderStatus==10&&particulars.payStatus==10">
					订单超时未付款</view>
			</view>
			<!-- 订单状态-----待付款 -->
			<view class="myPages__stateBox" v-else-if="particulars.payStatus==10&&particulars.orderStatus==20">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle">付款剩余时间：{{closeTime}}</span>
				</view>
				<view class="myPages__stateBoxBottom">订单还未付款，待付款</view>
			</view>
			<!-- 订单状态-----待收货----正在安排发货…----待评价-->
			<view class="myPages__stateBox" v-else-if="particulars.payStatus==20&&particulars.orderStatus==20">
				<view class="myPages__stateBoxTop">
					<span
						class="myPages__stateBoxTopTitle">{{particulars.deliveryStatus!=30?'正在安排发货…':(particulars.deliveryStatus==30&&particulars.receiptStatus!=30)?'待收货':''}}</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign.png"></image>
				</view>
				<view class="myPages__stateBoxBottom">
					{{particulars.deliveryStatus!=30?'手表拼装打包等待发货中':(particulars.deliveryStatus==30&&particulars.receiptStatus!=30)?'手表已发出，请留意派送电话':''}}
				</view>
			</view>



			<view class="myPages__stateBoxMain">
				<!-- 快递区 -->
				<view class="myPages__logistics"
					v-if="particulars.orderStatus==30||(particulars.payStatus==20&&particulars.orderStatus==20&&particulars.deliveryStatus==30&&particulars.receiptStatus!=30)"
					@click="wliuShow = true">
					<image class="myPages__logisticsImg" src="/static/images/logistics.png"></image>
					<view class="myPages__logisticsMain">
						<p class="myPages__logisticsMainTop">
							{{particulars.orderAddress.province}}{{particulars.orderAddress.city}}{{particulars.orderAddress.region}}{{particulars.orderAddress.detail}}
						</p>

						<view class="myPages__logisticsMainBottom">
							<span>{{particulars.orderAddress.name}}</span>
							<span>{{particulars.orderAddress.phone}}</span>
						</view>
					</view>
					<image class="myPages__logisticsMainEnd" src="/static/images/rightSignss.png"></image>
				</view>
				<view class="myPages__logistics" v-else>
					<image class="myPages__logisticsImg" src="/static/images/logistics.png"></image>
					<view class="myPages__logisticsMain">
						<p class="myPages__logisticsMainTop">
							{{particulars.orderAddress.province}}{{particulars.orderAddress.city}}{{particulars.orderAddress.region}}{{particulars.orderAddress.detail}}
						</p>
						<view class="myPages__logisticsMainBottom">
							<span>{{particulars.orderAddress.name}}</span>
							<span>{{particulars.orderAddress.phone}}</span>
						</view>
					</view>
					<!-- <image class="myPages__logisticsMainEnd" src="/static/images/rightSign.png"></image> -->
				</view>
				<!--  -->

				<!-- 订单区 -->
				<view class="myPages__mainForm">
					<view class="myPages__mainFormHaerd">
						<view class="myPages__mainFormHaerdLeft">
							<image class="myPages__mainFormHaerdLeftImg" src="/static/images/titleLogo.png"></image>
							<span>| 新潮手表新鲜式</span>
						</view>
						<image @click="serviceShow = true" class="myPages__mainFormHaerdRightImg"
							src="/static/images/headset.png"></image>
					</view>
					<view class="myPages__mainFormMain">
						<view v-for="(item,index) in particulars.orderProductList" :key="index">
							<view v-if="item.productType==10" class="myPages__mainFormMainItem">
								<view class="myPages__mainFormMainItemName">{{item.productName}}</view>
								<view class="myPages__mainFormMainItemBody">
									<view class="myPages__mainFormMainItemBodyTop">
										<view @click.stop="ff_previewImage(item.productImg)"
											class="myPages__mainFormMainItemBodyTopImgBox">
											<image
												class="myPages__mainFormMainItemBodyTopImgs mymyPages__mainFormMainItemBodyTopImgs"
												:src="item.productImg">
											</image>
										</view>
										<view class="myPages__mainFormMainItemBodyBottomx">
											<p>{{item.productSku}}</p>
											<span>¥{{item.price}}</span>
										</view>
									</view>
									<view class="myPages__mainFormMainItemBodyBottom">
										<view class="myPages__mainFormMainItemBodyBottomImgBox">
											<view class="myPages__mainFormMainItemBodyTopImgBoxs"
												@click.stop="ff_previewImages(item.orderGoodsList,twoIndex)"
												v-for="(twoItem,twoIndex) in item.orderGoodsList" :key="twoIndex">
												<image class="myPages__mainFormMainItemBodyTopImg"
													:src="twoItem.coverImg">
												</image>
											</view>

										</view>
										<view class="myHandbag__mainItemCenBoxJjieMains">
											<view class="myHandbag__mainItemCenBoxJjieMainNum">
												x<span>{{item.productNum}}</span>件</view>
										</view>


									</view>
								</view>
							</view>
						</view>
						<view v-if="partOrderProductList.length">
							<view class="myPages__mainFormMainItem">
								<view class="myPages__mainFormMainItemName">手表配件</view>
								<view class="myPages__mainFormMainItemBody">
									<view class="myPages__mainFormMainItemBodyTop myPages__mymainFormMainItemBodyTop"
										v-for="(item,index) in partOrderProductList" :key="index">
										<view @click.stop="ff_previewImage(item.productImg)"
											class="myPages__mainFormMainItemBodyTopImgBox">
											<image
												class="myPages__mainFormMainItemBodyTopImgs myPages__mymainFormMainItemBodyTopImgs"
												:src="item.productImg"></image>
										</view>
										<view class="myPages__mainFormMainItemBodyBottomx">
											<p>{{item.productSku}}</p>
											<span>¥{{item.price}}</span>
										</view>
										<view class="myHandbag__mainItemCenBoxJjieMainNuxsm">
											x<span>{{item.productNum}}</span></view>
									</view>

								</view>
							</view>
						</view>
						<view class="myPages__mainFormMainButtom">
							<view class="myPages__mainFormMainButtomText">共{{particulars.totalNum}}件，合计应付:</view>
							<view class="myPages__mainFormMainButtomBox">
								<span>￥</span>
								<span>{{particulars.totalPrice}}</span>
							</view>
						</view>
					</view>


				</view>
				<!-- 备注与支付方式-->
				<!-- 订单状态-----待收货----正在安排发货…----待评价- -->
				<view class="myPages__remarkBox" v-if="particulars.payStatus==20&&particulars.orderStatus==20">
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeftz">
							备注信息
						</view>
						<view class="myPages__remarkRight">
							{{particulars.buyerRemark?particulars.buyerRemark:'无'}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeftz">
							支付方式
						</view>
						<image
							:src="particulars.payType == 20 ? '/static/images/zfIcon.png' : '/static/images/yeIcon.png'">
						</image>
					</view>
				</view>

				<!-- 订单状态-----待付款 -->
				<view class="myPages__remarkBoxs" v-if="particulars.payStatus==10&&particulars.orderStatus==20"
					@click="isRemark = true">
					<view class="myPages__remarkLeft">
						<image class="myPages__remarkLeftIcon" src="/static/images/remarkIcon.png"></image>
						<span>备注信息</span>
					</view>
					<view class="myPages__remarkRight">
						<span>{{textareaValue ? textareaValue : '添加备注'}}</span>
						<image class="myPages__remarkRightIcon" src="/static/images/rightSign.png"></image>
					</view>
				</view>
				
				<!-- 支付区 -->
				<!-- 订单状态-----待付款 -->
				<view class="myPages__paymentBox" v-if="particulars.payStatus==10&&particulars.orderStatus==20">
					<view class="myPages__paymentBoxItem" @click.stop="tagerPaymentIndex(index)"
						v-for="(item,index) in paymentList" :key="index">
						<view class="myPages__paymentLeft">
							<image class="myPages__paymentLeftIcon" :src="item.path"></image>
							<view class="myPages__paymentLeftText">
								<span>{{item.name}}</span>
								<span v-if="user.walletMoney && index==1">:剩余¥{{user.walletMoney}}</span>
							</view>
						</view>
						<image class="myPages__paymentLRight"
							:src="paymentIndex==index ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
						</image>
					</view>
				</view>

				<!-- 订单时间与编号-->
				<!-- 订单状态-----安排发货 -->
				<!--  -->
				<view class="myPages__remarkBox">
					<view class="myPages__remarkBoxItems bianhao">
						<view class="myPages__remarkLeft">
							订单时间
						</view>
						<view class="myPages__remarkRight" v-if="particulars">
							{{particulars.createTime | ff_createTime}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeft">
							订单编号
						</view>
						<view class="myPages__remarkRight">
							{{particulars.orderNo}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems" v-if="particulars&&particulars.orderStatus==30">
						<view class="myPages__remarkLeft">
							收货时间
						</view>
						<view class="myPages__remarkRight">
							{{particulars.receiptTime | ff_createTime}}
						</view>
					</view>
				</view>


			</view>

			<!-- 底部按钮 -->
			<!-- 订单状态-----待收货---待评价(去评价) -->

			<view class="myPages__stateBoxMainButtom"
				v-if="(particulars.deliveryStatus==30&&particulars.receiptStatus!=30)">
				<view @click="ff_saleShow" class="myPages__stateBoxMainButtomTk" v-if="ispayStatusAll">
					申请售后
				</view>
				<view class="myPages__stateBoxMainButtomSh" @click="accomplish">
					确认收货
				</view>
			</view>


			<!-- 订单状态-----交易关闭【已支付未发货全部申请退款】-->
			<view class="myPages__remarkButtom" v-if="particulars.orderStatus==10">
				<view class="myPages__remarkBoxssZF" @click.stop="goBackRemark">
					重新购买
				</view>
			</view>
			<!-- 重新购买 -->
			<view class="myPages__remarkButtom"
				v-if="particulars&&particulars.payStatus==10&&particulars.orderStatus==20&&particulars.payStatus==10">
				<view class="myPages__remarkBoxssZF" @click.stop="sendRemark">
					￥{{particulars.totalPrice}} | 立即支付
				</view>
			</view>

			<!-- 订单状态-----正在安排发货…--已完成 -->
			<view @click.stop="saleShow = true" class="myPages__remarkButtom myPages__remarkButtomTk"
				v-if="(particulars.serviceStatus==10&&particulars&&particulars.payStatus==20&&particulars.orderStatus==20 && ispayStatusAll) || (particulars.orderStatus==30&& ispayStatusAll)">
				<view class="myPages__remarkBoxss myPages__remarkBoxssTk">
					申请售后
				</view>
			</view>
		</view>
		<!-- 撤销申请 -->
		<u-overlay :show="show" @click="show = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确认撤销售后申请？</view>
				<view class="warpButtom">
					<span class="warpButtomQx">取消</span>
					<span class="warpButtomYes">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 申请售后 -->
		<u-overlay :show="saleShow" @click.stop="saleShow = false">
			<view @click.stop="" class="saleBox">
				<view class="saleBox__Heard">申请售后</view>
				<image @click.stop="saleShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view @click.stop="goAfterSaleDetails({orderProductId:item,orderId:particulars.orderId})"
						v-for="(item,index) in particulars.orderProductList" :key="index">
						<view class="saleBox__MainItem" v-if="item.serviceStatus==0">
							<span>{{item.productName}}</span>
							<span>(数量:{{item.productNum}}件）</span>
						</view>

					</view>
					<view class="saleBox__MainItem"
						@click.stop="goAfterSaleDetails({orderProductId:'allIn',orderId:particulars.orderId})">申请全部
					</view>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="wliuShow" @click="wliuShow = false">
			<view class="saleBox saleBoxBody" @click.stop="">
				<view class="saleBox__Heard">订单跟踪</view>
				<image @click.stop="wliuShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__MainBody" v-if="particulars.orderExpress.kuaiDi100.data">
					<view
						:class="index!=particulars.orderExpress.kuaiDi100.data.length-1 ? 'saleBox__BiaoZhiItem' : 'saleBox__BiaoZhiItem saleBox__BiaoZhiItem--black'"
						v-for="(item,index) in particulars.orderExpress.kuaiDi100.data" :key="index">
						<view class="saleBox__BiaoZhiItemTitleBox">
							<span
								:class="index!=particulars.orderExpress.kuaiDi100.data.length-1 ? 'saleBox__BiaoZhiItemTitleBoxYuan' : 'saleBox__BiaoZhiItemTitleBoxYuan saleBox__BiaoZhiItemTitleBoxYuan--red'"></span>
							<span v-if="index!=particulars.orderExpress.kuaiDi100.data.length-1"
								class="saleBox__BiaoZhiItemTitleBoxGan"></span>
						</view>
						<view class="saleBox__BiaoZhiItemContext">{{item.context}}</view>
						<view class="saleBox__BiaoZhiItemFtime">{{item.ftime}}</view>
					</view>
				</view>
				<view class="saleBox__MainBodyxxx" v-else>
					{{particulars.orderExpress.kuaiDi100.message}}
				</view>
			</view>
		</u-overlay>
		<!-- 联系客服 -->
		<u-overlay :show="serviceShow" @click="serviceShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">联系客服</view>
				<image @click.stop="serviceShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem saleBox__MainItem--service"
						@click.stop="callSeller(particulars.serverPhone)">
						<span class="serviceIphone">客服电话：{{particulars.serverPhone ? particulars.serverPhone : '暂无客服'}}
						</span>
						<image class="serviceIphoneImg" src="/static/images/serviceIcons.png"></image>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 备注信息 -->
		<u-overlay :show="isRemark" @click="isRemark = false">
			<view @click.stop="" class="saleBox">
				<view class="saleBox__Heard">备注信息</view>
				<image @click.stop="ffsaleBox__HeardImg" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<textarea :maxlength="50" :show-confirm-bar="false" @click.stop="" class="saleBox__MainText" v-model="textareaValue"
						placeholder="输入备注内容"></textarea>
						<view class="saleBox__MainTextarea">
							<span>{{textareaValue.length}}</span>
							<span>/50</span>
						</view>
					<view @click.stop="ff_isRemark"
						:class="textareaValue.length == 0 ? 'saleBox__MainItem saleBox__MainItem--wthid' : 'saleBox__MainItem saleBox__MainItem--red'">
						确定备注</view>
				</view>
			</view>
		</u-overlay>
		<!-- 备注成功 -->
		<u-overlay :opacity="0.01" :show="isRemarkShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>备注成功</span>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	import myHeard from '@/components/myHeard/index.vue'
	let that = null;
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				orderExpress: {},
				partOrderProductList: [],
				title: '订单详情',
				ScrollTopColor: '',
				textareaValue: '',
				paymentIndex: 0,
				wliuShow: false,
				show: false,
				saleShow: false,
				serviceShow: false,
				isRemark: false,
				isRemarkShowDui: false,
				sendObj: null,
				particulars: null,
				isScrollTop: true,
				isTrue: false,
				ispayStatusAll: true,
				closeTime: '',
				orderNo: '',
				addressId: '',
				paymentList: [{
						path: '/static/images/zfIcon.png',
						name: '微信支付',
						num: null
					},
					{
						path: '/static/images/yeIcon.png',
						name: '余额支付',
						num: 795.12
					}
				]
			}
		},
		onPageScroll(e) {
			// isTrue
			if (e.scrollTop > 10) {
				this.isTrue = true;
			} else {
				this.isTrue = false;
			}
		},
		onLoad(oprtion) {
			// console.log('user-->',this.user)
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (oprtion.orderNo) {
				this.orderNo = oprtion.orderNo;
				this.initOrderWxCreate();
			}

			that = this;

		},
		onShow(oprtion) {
			if (oprtion) {
				let nowparticulars = JSON.parse(JSON.stringify(this.particulars))
				nowparticulars.orderAddress = oprtion == '无' ? null : oprtion;

				this.particulars = JSON.parse(JSON.stringify(nowparticulars))
				console.log('this.particulars--->', this.particulars)

			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			}

		},
		filters: {
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(
						formatNumber)
					.join(':')
			}
		},
		methods: {
			ff_previewImages(myImgs, index = 0) {
				let imgs = [];
				myImgs.forEach(item => {
					imgs.push(item.coverImg)
				})
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			ff_remark() {
				if (this.paymentIndex == 1 && this.particulars.totalPrice > this.user.walletMoney) {
					uni.showToast({
						icon: 'none',
						title: '余额不足',
						mask: true
					})
					return true;
				}
				return false;
			},
			ffsaleBox__HeardImg() {
				this.isRemark = false;
				this.textareaValue = "";
			},
			ff_isRemark() {
				if (this.textareaValue.length == 0) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.isRemark = false;
				this.isRemarkShowDui = true;
				setTimeout(() => {
					this.isRemarkShowDui = false;
				}, 1000)
			},
			callSeller(phone) {
				if (!phone) {

					uni.showToast({
						icon: 'none',
						title: '暂无客服'
					});
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
				});
				// this.serviceShow = false;
			},
			goAfterSaleDetails({
				orderProductId,
				orderId
			}) {
				let sales = {};
				let orderProductIds = [];
				if (orderProductId == 'allIn') {
					this.particulars.orderProductList.forEach(item => {
						if (item.serviceStatus == 0) {
							orderProductIds.push(item)
						}

					})
					sales = {
						orderId,
						orderProductIds
					}
				} else {
					orderProductIds = [orderProductId];
					sales = {
						orderId,
						orderProductIds
					}
				}
				this.saleShow = false;

				uni.navigateTo({
					url: `/package/applySales/index?sales=${JSON.stringify(sales)}&orderStatus=${this.particulars.orderStatus}&payStatus=${this.particulars.payStatus}`
				})
			},
			initOrderWxCreate() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxDetail({
					orderNo: this.orderNo
				}).then(res => {
					if (res.code == 200) {
						this.particulars = null;
						this.particulars = res.data;
						this.partOrderProductList = [];
						this.particulars.orderProductList.forEach(item => {
							if (item.productType == 20) {
								this.partOrderProductList.push(item)
							}
						})

						this.ispayStatusAll = false;
						for (let i = 0; i < this.particulars.orderProductList.length; i++) {
							let item = this.particulars.orderProductList[i];
							if (item.serviceStatus == 0) {
								this.ispayStatusAll = true;
								break
							}
						}


						this.textareaValue = this.particulars.buyerRemark;
						if (this.particulars.payStatus == 10 && this.particulars.orderStatus == 20 && this
							.particulars.payStatus == 10) {
							// console.log('this.particulars.closeTime--->',)
							this.myTime(this.particulars.closeTime, this.particulars.createTime);

						}
					}
				})
			},
			myTime(closeTime, createTime) {
				closeTime = new Date(closeTime).getTime();

				let nowCloseTime = new Date(createTime).getTime();
				let chaCloseTime = closeTime - nowCloseTime;
				console.log('chaCloseTime--->', chaCloseTime, nowCloseTime, closeTime)
				if (chaCloseTime <= 0) {
					this.closeTime = `00:00:00`;

				} else {
					let time = setInterval(() => {
						chaCloseTime = chaCloseTime - 1000;
						let hour = Math.floor(chaCloseTime / 3600000) >= 10 ? Math.floor(chaCloseTime /
								3600000) :
							`0${Math.floor(chaCloseTime/3600000)}`
						let minute = Math.floor((chaCloseTime - (hour * 3600000)) / 60000) >= 10 ? Math.floor((
								chaCloseTime - (hour * 3600000)) / 60000) :
							`0${Math.floor((chaCloseTime - (hour*3600000))/60000)}`
						let second = Math.floor((chaCloseTime - hour * 3600000 - minute * 60000) / 1000) >=
							10 ? Math
							.floor((chaCloseTime - hour * 3600000 - minute * 60000) / 1000) :
							`0${Math.floor((chaCloseTime - hour*3600000 - minute*60000)/1000 )}`
						this.closeTime = `${hour}:${minute}:${second}`
						if (hour == '00' && minute == '00' && second == '00') {
							clearInterval(time);
							this.initOrderWxCreate();
						}

					}, 1000);
				}

			},
			goBackRemark() {
				let req = {
					orderNo: this.orderNo,
					buyType: 3
				}
				uni.redirectTo({
					url: `/package/orderForm/index?backObj=${JSON.stringify(req)}`
				})
			},
			sendRemark() {

				let buyerRemark = this.textareaValue;
				let payType = this.paymentIndex == 0 ? 20 : 30;
				let isRemark = this.ff_remark();
				if (isRemark) return;


				let that = this;

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxPay({
					buyerRemark,
					orderNo: this.orderNo,
					payType: payType == 20 ? 'WECHAT' : 'WALLET'
				}).then(twoItem => {
					let {
						result
					} = twoItem.data
					if (twoItem.data.payType == 'WECHAT') {
						// 微信支付
						if (twoItem.data.needPay) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							uni.requestPayment({
								nonceStr: result.nonceStr,
								package: result.packageValue,
								paySign: result.paySign,
								timeStamp: result.timeStamp,
								signType: result.signType,
								success: threeRes => {
									that.orderWxPayQuery(twoItem.data.orderNo);
								},
								fail: threeRes => {
									that.orderWxPayQuery(twoItem.data.orderNo);
								}
							});


						} else {
							that.orderWxPayQuery(twoItem.data.orderNo);
						};
					} else {
						// 余额支付
						if (twoItem.data.needPay) {


							that.orderWxPayQuery(twoItem.data.orderNo);

						} else {
							that.orderWxPayQuery(twoItem.data.orderNo);
						};
					}
				})

			},
			// 查询支付状态
			orderWxPayQuery(orderNo) {
				this.$api.orderWxPayQuery({
					orderNo
				}).then(res => {
					if (res.code === 200) {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.data.isPay ? '支付成功' : '支付失败',
							mask: true
						});
						if(res.data.isPay){
							uni.redirectTo({
								url: `/package/succeed/index?orderNo=${orderNo}`
							})
						}else{
							this.initOrderWxCreate();
						}
					};
				});
			},

			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			tagerPaymentIndex(index) {
				this.paymentIndex = index;
			},
			revocation() {
				this.show = true;
			},
			ff_saleShow() {
				this.saleShow = true;
			},
			accomplish() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderExpressWxReceipt({
					orderNo: this.orderNo,
					orderExpressId: this.particulars.orderExpress.orderExpressId
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						})
						this.initOrderWxCreate();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		width: 100%;
		min-height: 100vh;
		background: #f6f7fb;

		box-sizing: border-box;

		.myUser_bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.myPages__stateMain {
			z-index: 99;
			position: relative;
			width: 100%;


		}

		.myPages__remarkButtomTk {}

		.myPages__remarkBoxss {
			color: #717178 !important;
			background-color: #ebebf0 !important;
		}

		.serviceIphoneImg {
			width: 58rpx;
			height: 58rpx;
		}

		.serviceIphone {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		.saleBox__MainItem--service {
			justify-content: space-between !important;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}
		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}

		.saleBoxBody {
			height: 900rpx;
		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}


		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
			
		}

		.saleBox__MainBody {
			height: 800rpx;
			overflow: scroll;
		}

		.saleBox__MainBodyxxx {
			text-align: center;
			font-size: 30rpx;
			color: #B0B1BB;
			margin-top: 200rpx;
		}

		.saleBox__BiaoZhiItem {
			display: flex;
			height: 105rpx;
			margin: 20rpx 0;
			font-size: 26rpx;
			color: #B0B1BB;
		}

		.saleBox__BiaoZhiItem--black {
			color: #000;
		}

		.saleBox__BiaoZhiItemTitleBox {
			flex: 0 0 30rpx;
			position: relative;
		}

		.saleBox__BiaoZhiItemTitleBoxYuan {
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 50%;
			border-radius: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemTitleBoxYuan--red {
			background-color: #F0414D !important;
		}

		.saleBox__BiaoZhiItemTitleBoxGan {
			display: inline-block;
			width: 6rpx;
			height: 113rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 109%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemContext {
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //保留多少行
			overflow: hidden;

		}

		.saleBox__BiaoZhiItemFtime {
			flex: 0 0 146rpx;
		}


		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}
		.saleBox__MainTextarea {
			display: flex;
			width: 60rpx;
			height: 36rpx;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 36rpx;
			color: #2B2B33;
			position: absolute;
			right: 64rpx;
			bottom: 185rpx;
			span:nth-child(1){
				color: #babbbd;
			}
		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.myPages__logistics {
			position: relative;
			width: 686rpx;
			height: 168rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 40rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			overflow: hidden;

			&::after {
				content: '';
				bottom: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 4rpx;
				background-image: repeating-linear-gradient(125deg, #C2DCFF 0, #C2DCFF 20rpx, #F0414D 20rpx, #F0414D 40rpx);
			}
		}

		.myPages__logisticsImg {
			width: 72rpx;
			height: 104rpx;
			flex: 0 0 72rpx;
		}

		.myPages__logisticsMain {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 32rpx;
			width: 416rpx;

		}

		.myPages__logisticsMainTopView {
			display: flex;
			align-items: center;

		}

		.myPages__logisticsMainTop {
			height: 44rpx;
			font-size: 32rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 44rpx;
			color: #2B2B33;
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.myPages__logisticsMainBottom {
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #7B7D8D;
				opacity: 1;
			}

			span:nth-child(2) {
				margin-left: 24rpx;
			}
		}

		.myPages__logisticsMainEnd {
			width: 56rpx;
			height: 56rpx;
			flex: 0 0 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMain {
			height: 56rpx;
			display: flex;
			border-radius: 32rpx;
			background-color: #F7F8FC;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 56rpx;
			height: 56rpx;
		}

		.myPages__mainFormHaerdLeftImg {
			width: 94rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}

		.myPages__mainFormHaerdRightImg {
			width: 40rpx;
			height: 40rpx;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}

		.mymyPages__mainFormMainItemBodyTopImgs {
			transform: scale(1.5);
		}

		.myPages__mymainFormMainItemBodyTopImgs {
			width: 92rpx !important;
			height: 92rpx !important;
		}

		.myPages__stateBoxMain {
			background: linear-gradient(180deg, #F7F8FC 0%, #F7F8FC 100%);
			box-shadow: 0px -12rpx 24rpx rgba(43, 43, 51, 0.04);
			opacity: 1;
			border-radius: 48rpx 48rpx 0px 0px;
			padding: 32rpx;
			box-sizing: border-box;
			padding-bottom: 140rpx;
		}

		.myPages__stateBox {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__stateBoxTop {
			display: flex;
			align-items: center;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 112rpx;
			height: 112rpx;
		}

		.myPages__stateBoxTopTitle {
			display: flex;
			height: 56rpx;
			font-size: 40rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 56rpx;
			color: #2B2B33;
		}

		.myPages__stateBoxTopTitle--tk {
			color: #FFFFFF !important;
		}

		.myPages__stateBoxTopImg {
			width: 36rpx;
			height: 36rpx;
		}

		.myPages__stateBoxTopImg--tk {
			color: #e6d2d2 !important
		}

		.myPages__stateBoxBottom {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #7B7D8D;
			margin-top: 4rpx;
		}

		.myPages__mainForm {
			width: 686rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			margin: 20rpx 0;
		}

		.myPages__mainFormHaerd {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #B0B1BB;
				opacity: 1;
			}

		}

		.myPages__mainFormHaerdLeft {
			display: flex;
			height: 40rpx;
			align-items: center;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myHandbag__mainItemCenBoxJjieMains {
			display: flex;
			border-radius: 32rpx;
			flex: 0 0 160rpx;
			width: 160rpx;
			text-align: center;
			height: 100%;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 2rpx;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainNum {
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #7B7D8D;
			opacity: 1;
			text-align: center;
			width: 100%;

			span {
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}
		}


		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMainButtomBox {
			span {
				display: inline-block;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				font-size: 32rpx;
			}

			span:nth-child(1) {
				font-size: 24rpx;
			}
		}


		.myPages__mainFormMainItem {
			width: 100%;
			background-color: #F0F2F8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

		}

		.myPages__mainFormMainItemName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 50rpx;
			color: #7B7D8D;
			opacity: 1;
			padding: 0 24rpx;
		}

		.myPages__mainFormMainItemBody {
			background: #FFFFFF;
			border: 2rpx solid #F0F2F8;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.myPages__mainFormMainItemBodyTop {
			display: flex;
			justify-content: space-between;
		}

		.myPages__mymainFormMainItemBodyTop {
			margin-bottom: 16rpx;
		}

		.myPages__mainFormMainItemBodyTop:last-child {
			margin-bottom: 0;
		}

		.myPages__mainFormMainItemBodyTopImgBox {
			width: 136rpx;
			flex: 0 0 136rpx;
			height: 136rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f9f8fd;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myHandbag__mainItemCenBoxJjieMainNuxsm {
			flex: 0 0 26rpx;
			width: 26rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			transform: translateY(8rpx);
		}

		.myPages__mainFormMainItemBodyBottomx {
			margin-left: 20rpx;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-around;

			p {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}

			span {
				display: flex;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 44rpx;
				color: #2B2B33;
			}
		}

		.myPages__mainFormMainItemBodyBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			height: 110rpx;
		}

		.myPages__mainFormMainItemBodyBottomImgBox {
			flex: 1;
			margin-right: 34rpx;
			display: flex;
			justify-content: space-between;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 92rpx;
			height: 92rpx;
		}

		.myPages__mainFormMainItemBodyTopImgBoxs {
			width: 112rpx;
			height: 112rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f7f8fc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myPages__remarkLeftIcon {
			height: 48rpx;
			width: 48rpx;
		}

		.myPages__remarkRightIcon {
			height: 40rpx;
			width: 40rpx;
			flex: 0 0 40rpx;
		}

		.myPages__remarkLeftz {
			span {
				display: inline-block;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}


			flex: 0 0 145rpx;
		}

		.myPages__remarkLeft {
			span {
				display: inline-block;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}

			display: flex;
			align-items: center;
			flex: 0 0 160rpx;
		}

		.myPages__remarkRight {
			span {
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			display: flex;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.myPages__paymentBox {
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin: 20rpx 0;

		}

		.myPages__paymentBoxItem {
			height: 48rpx;
			line-height: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
		}

		.myPages__paymentLeftText {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			display: inline-block;

			span {
				margin-left: 10rpx;
			}

			span:nth-child(2) {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}
		}

		.myPages__paymentLeftIcon {
			height: 48rpx;
			width: 48rpx;

		}

		.myPages__paymentLeft {
			flex: 1;
			display: flex;
		}

		.myPages__paymentLRight {
			height: 44rpx;
			width: 44rpx;
			flex: 0 0 44rpx;
		}

		.myPages__remarkBox {
			width: 100%;
			padding: 32rpx;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.myPages__remarkBoxItems {
				width: 100%;
				padding: 14rpx 0;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
				display: flex;
				justify-content: space-between;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.myPages__remarkRight {
				color: #7B7D8D !important;
			}
		}

		.myPages__remarkBoxs {
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			align-items: center;
		}

		.myPages__remarkBoxItems {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.myPages__remarkButtom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 32rpx;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			background-color: #F7F8FC;
			z-index: 9;
		}

		.myPages__remarkBoxssZF {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			color: #FFFFFF;
			box-sizing: border-box;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.myPages__remarkBoxss {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			color: #FFFFFF;
			box-sizing: border-box;
		}

		.myPages__stateBoxMainButtom {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: space-evenly;
			padding: 32rpx;
			padding-bottom: 48rpx;
			width: 100%;
			box-sizing: border-box;
			background: #f7f8fc;

			view {
				flex: 1;
				width: 296rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 40rpx;
				text-align: center;
			}

			view:nth-child(2) {
				margin-left: 20rpx;
			}
		}

		.myPages__stateBoxMainButtomTk {
			background-color: #ebebf0;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		.myPages__stateBoxMainButtomSh {
			background-color: #F44B5B;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

	}
</style>
